<!--
 * @Author: zhangfeng
 * @Date: 2023-11-30 11:57:10
 * @LastEditTime: 2024-01-04 11:58:31
 * @LastEditors: zhangfeng
 * @Description: 
 * @FilePath: \manager\managersystem\src\views\LoginPage.vue
 * © 2023 张峰，All rights reserved.
-->
<template>
	<div class="ui-login">
		<el-form
			ref="ruleFormRef"
			:model="ruleForm"
			status-icon
			:rules="rules"
			label-width="60px"
			class="demo-ruleForm"
		>
			<h1>welcome</h1>
			<el-form-item label="用户名" prop="user_name">
				<el-input v-model="ruleForm.user_name" autocomplete="off" />
			</el-form-item>
			<el-form-item label="密码" prop="password">
				<el-input v-model="ruleForm.password" type="password" autocomplete="off" />
			</el-form-item>
			<el-form-item label-width="0">
				<el-button
					style="width: 100%; margin-top: 20px"
					type="primary"
					:loading="isLoading"
					@click="submitForm(ruleFormRef)"
					>登录</el-button
				>
			</el-form-item>
		</el-form>
	</div>
</template>

<script setup lang="ts">
import { login } from '../api/login';
import type { FormRules, FormInstance } from 'element-plus';
import { user } from '../store/index';
const token = user();
const route = useRoute();
const router = useRouter();
const ruleFormRef = ref<FormInstance>();
const validatePass = (rule: any, value: any, callback: Function) => {
	if (value === '') {
		callback(new Error('请输入用户名'));
	} else {
		callback();
	}
};
const validatePass2 = (rule: any, value: any, callback: Function) => {
	if (value === '') {
		callback(new Error('请输入密码'));
	} else {
		callback();
	}
};

const ruleForm: LoginData = reactive({
	user_name: 'user',
	password: 'user1234',
});
const rules = reactive<FormRules<typeof ruleForm>>({
	user_name: [{ validator: validatePass, trigger: 'blur' }],
	password: [{ validator: validatePass2, trigger: 'blur' }],
});

const isLoading = ref(false);
const submitForm = (formEl: FormInstance | undefined) => {
	if (!formEl) return;
	formEl.validate((valid) => {
		if (valid) {
			isLoading.value = true;
			login(ruleForm)
				.then((res: AxiosResponse<ResponseData>) => {
					isLoading.value = false;
					token.saveToken(res.result.access_token);
					router.push((route.query.redirect as string) || '/');
				})
				.catch((error) => {
					console.error(error);
					isLoading.value = false;
				});
		} else {
			console.log('error submit!');
			return false;
		}
	});
};
</script>

<style lang="scss" scoped>
.ui-login {
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	&::before {
		content: '';
		width: 100%;
		height: 100%;
		background-image: url('../assets/_DSC0469z.JPG');
		background-origin: border-box;
		background-size: 100% 100%;
		filter: blur(5px);
		position: absolute;
		top: 0;
		left: 0;
	}
	.demo-ruleForm {
		padding: 20px 50px 50px 50px;
		background: #fff;
		z-index: 10;
		border-radius: 10px;
	}
}
</style>
